<template>
	<view class="empty" :style="[emptyStyle]" v-if="!loading && list.length<=0">
		<m-icon :wh="wh" :type="icon" v-if="iconShow"></m-icon>
		<text class="hint">{{title}}</text>
	</view>
</template>

<script>
	import mixin from "../../libs/mixin/mixin.js"
	export default {
		mixins: [mixin],
		name: "m-empty",
		props: {
			iconShow: {
				type: Boolean,
				default: true
			},
			icon: {
				type: String,
				default: 'empty'
			},
			wh: {
				type:String,
				default: '320'
			},
			title: {
				type: String,
				default: '暂无数据'
			},
			list: {
				type: Array,
				default: () => []
			},
		},
		data() {
			return {};
		},
		computed: {
			emptyStyle() {
				return {
					...this.style,
					'width': 'auto',
					'height': 'auto',
				}
			},
		},
		mounted() {
			// console.log(this.width)
		},
	}
</script>

<style lang="scss">
	.empty {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
		min-height: 200rpx;
		justify-content: center;

		.hint {
			display: block;
			margin-top: 20rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #888888;
		}

	}
</style>